<!--
 * @Author: 码上talk|RC
 * @Date: 2020-09-28 16:58:03
 * @LastEditTime: 2021-01-05 17:05:35
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /tacomall-merchant/src/pages/order/list.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
    <div class="order-list">
        <div class="ol-sort ol-block">
            <div class="ob-title">
                <span>订单检索</span>
            </div>
            <div class="ob-content">
                <div class="os-left">
                    <div class="l-item">
                        <i-select
                            style="width: 100px"
                            v-model="defaultValue.status"
                            clearable
                            @on-change="statusChange"
                        >
                            <i-option
                                :key="key"
                                :value="item.value"
                                v-for="(item, key) in orderEnum.orderStatus"
                            >{{item.label}}</i-option>
                        </i-select>
                    </div>
                    <div class="l-item">
                        <i-date-picker
                            format="yyyy/MM/dd"
                            type="daterange"
                            placement="bottom-end"
                            placeholder="上架时间"
                            style="width: 150px"
                        ></i-date-picker>
                    </div>
                    <div class="l-item">
                        <i-input
                            style="width: 150px"
                            placeholder="订单编号/关键字"
                            clearable
                            v-model="defaultValue.keyword"
                            @on-change="keywordChange"
                        ></i-input>
                    </div>
                </div>
                <div class="os-right">
                    <div class="r-item">
                        <i-button @click.native="resetParamsAndForm">重置</i-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="ol-list">
            <i-table border :columns="columns" :data="tableData">
                <template slot-scope="{ row }" slot="createTime">
                    <div class="table-time">
                        <span>{{row.createTime | timeFormat}}</span>
                    </div>
                </template>
                <template slot-scope="{ row }" slot="action">
                    <div>
                        <i-button size="small" @click="go(`/order/info?id=${row.id}`)">查看</i-button>
                    </div>
                </template>
            </i-table>
        </div>
        <div class="ol-page">
            <div class="op-left">
                <span>
                    共
                    <em>{{list.length}}</em>条数据
                </span>
            </div>
            <div class="op-right">
                <i-page :total="pageTotal" />
            </div>
        </div>
    </div>
</template>


<script>
/*eslint-disable */
import api from '@/api'
import { fn } from '@/utils/fn'
import { Order } from '@/model/order'
export default {
    data() {
        return {
            orderEnum: Order.ENUM.init(),
            defaultValue: {
                status: null,
                keyword: ''
            },
            params: {
                pageIndex: 1,
                pageSize: 10
            },
            reqBody: {
                query: {

                },
                order: {}
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '编号',
                    key: 'id'
                },
                {
                    title: '金额',
                    key: 'amount'
                },
                {
                    title: '支付方式',
                    key: 'payType'
                },
                {
                    title: '订单状态',
                    key: 'status'
                },
                {
                    title: '用户',
                    key: 'buyer'
                },
                {
                    title: '下单时间',
                    slot: 'createTime'
                },
                {
                    title: '操作',
                    slot: 'action',
                    fixed: 'right',
                    width: 200
                }
            ],
            list: [],
            pageTotal: 0,
            debounceGetOrderList: fn.debounce(() => {
                this.resetOrderList()
            })
        }
    },
    computed: {
        tableData() {
            return this.list.map(i => {
                return {
                    id: i['id'],
                    amount: i['amount'],
                    payType: '微信支付',
                    status: '未支付',
                    createTime: i['createTime'],
                    buyer: i['member']['nickname']
                }
            })
        }
    },
    methods: {
        init() {
            Order.ENUM.load().then(res => {
                this.orderEnum = res
            })
            this.getOrderList()
        },
        statusChange(val) {
            this.defaultValue['status'] = val
            this.value2reqBody()
            this.resetOrderList()
        },
        keywordChange(e) {
            this.defaultValue['keyword'] = e['target']['value']
            this.value2reqBody()
            this.debounceGetOrderList()
        },
        value2reqBody() {
            this.reqBody['query']['status'] = this.defaultValue['status']
            this.reqBody['query']['keyword'] = this.defaultValue['keyword']
        },
        resetParamsAndForm() {
            this.$Modal.confirm({
                title: '重置提示',
                content: '确定重置检索条件？',
                onOk: () => {
                    this.defaultValue = {
                        status: null,
                        keyword: ''
                    }
                    this.params = {
                        pageIndex: 1,
                        pageSize: 10
                    }
                    this.value2reqBody()
                    this.resetOrderList()
                }
            })
        },
        resetOrderList() {
            this.list = []
            this.getOrderList()
        },
        getOrderList() {
            Order.API('list', { params: this.params, data: this.reqBody }).then(res => {
                const { data, page } = res
                const { total } = page
                this.list = [...data].map(i => new Order(i))
                this.pageTotal = total
            })
        }
    },
    created() {
        this.init()
    }
}
</script>

<style lang="less">
.order-list {
    padding: 10px;
    background: white;
    .ol-block {
        padding: 20px 0;
        .ob-title {
            position: relative;
            display: flex;
            align-items: center;
            height: 30px;
            padding-left: 20px;
            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 3px;
                height: 100%;
                background: #1890ff;
            }
        }
        .ob-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
        }
    }
    .ol-sort {
        .os-left {
            display: flex;
            align-items: center;
            .l-item {
                &:not(:first-child) {
                    margin-left: 10px;
                }
            }
        }
    }
    .ol-page {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
    }
}
</style>